<route lang="json5">
	{
	style: {
	navigationStyle: 'custom',
	},
	}
</route>

<template>
	<view>
		<!-- 顶部导航栏 -->
		<wd-navbar title="我的发布" left-arrow safeAreaInsetTop @click-left="handleClickLeft">
			<template #title>
				<h4>我的发布</h4>
				<!-- 未滚动时 -->
				<view class="no-scroll">
					<wd-img :src="state.userAvatar || defaultUserAvatar" class="w-100rpx h-100rpx border-rd-[100%]" />
					<text class="lh-[2]">{{ state.username }}</text>
				</view>
			</template>
		</wd-navbar>

		<!-- 发布列表 -->
		<view class="publish-list" v-if="state.publishList.length > 0">
			<view v-for="(item, index) in state.publishList" :key="item.id">
				<view>{{ formatDate(item.createTime) }}</view>
				<view @longpress="showRevertPop(index, item)">
					<view @click="handleToDetails(item.id)">{{ item.content }}</view>
					<view class="imgList" :class="[
              item.picture.length > 3
                ? 'grid-cols-[1fr_1fr_1fr] h-300rpx'
                : item.picture.length === 2
                  ? 'grid-cols-[1fr_1fr] h-200rpx'
                  : 'grid-cols-1fr h-300rpx',
            ]" v-if="item.picture && item.picture.length > 0">
						<view v-for="(e, i) in item.picture" :key="i">
							<wd-img :src="e" :enable-preview="true" class="w-full h-full" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="empty-state flex-center flex-col mt-200rpx">
			<wd-status-tip :image="emptyImage" tip="暂无动态" />
		</view>
		<!-- 评论弹框 -->
		<uni-popup ref="revertRef" type="bottom" class="comment-pop" @change="onChangePop">
			<view class="comment-pop-content">
				<view class="send bg-[#fff] text-center py-20rpx" @click="handleDelItem">删除</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { useUserStore } from '@/store'

	/* 引入 mock 数据 */
	import { publishList } from '../config/index'
	import { deleteDiscussion, getCommentListApi } from '@/service/edu/comment'
	/* 引入 暂无数据 - 图片 */
	import emptyImage from '@/static/images/icons/empty.png'
	/* 引入 图片 - 评论默认头像 */
	import defaultUserAvatar from '@/static/images/comment/default_user.png'

	const revertRef = ref(null) // uni_popup 弹框实例
	const comtIptFocusStatus = ref(false) // 评论输入框聚焦状态

	/* 定义数据 */
	const state = reactive<{
		page : string
		title : string
		username : string
		userAvatar : string
		publishList : any[]
		scrollHeight : number
		delId : number | string
	}>({
		/* 当前页面/组件 */
		page: 'details',
		/* 导航栏标题 */
		title: '我的发布',
		/* 用户名称 */
		username: '',
		/* 用户头像 */
		userAvatar: '',
		/* 发布列表 */
		publishList: [],
		/* 滚动距离 */
		scrollHeight: 0,
		/* 动态id，删除时使用 */
		delId: '',
	})

	/* 顶部导航栏 - 返回 */
	function handleClickLeft() {
		uni.navigateBack()
	}

	/* 监听滚动事件 - 让导航栏发生变化 */
	onPageScroll((e) => {
		state.scrollHeight = e.scrollTop
	})

	/* 获取我的发布列表 */
	const userStore = useUserStore()
	async function getListData() {
		/* 1. 拿到后端返回的数据 */
		const data : any = await getCommentListApi({
			userId: userStore.userInfo?.userId,
		})
		/* 3. 返回数据 */
		state.publishList = data?.rows.length > 0 ? data?.rows : []
		state.username = userStore.userInfo?.nickName
		state.userAvatar = userStore.userInfo?.avatar
		if (state.publishList.length > 0) {
			/* 4. 对 某些数据 进行额外处理 */
			state.publishList.forEach((e) => {
				if (e.picture) {
					if (typeof e.picture === 'string') {
						e.picture = e.picture.split(',')
					}
				} else {
					e.picture = []
				}
			})
		}
	}

	/* 删除 */
	async function handleDelItem() {
		uni.showModal({
			title: '提示',
			content: '确定删除该动态吗？',
			success: async (res) => {
				try {
					await deleteDiscussion(state.delId)
					await getListData()
				} catch (e) {
					console.error('删除失败', e)
				} finally {
					revertRef.value.close()
				}
			},
		})
	}


	/* 进入详情 */
	function handleToDetails(id) {
		uni.navigateTo({
			url: `/pages/comment/details/index?commentId=${id}`,
		})
	}

	async function showRevertPop(index, row) {
		state.delId = row.id
		revertRef.value.open()
	}

	/**
	 * 弹框change事件
	 */
	function onChangePop(e) {
		comtIptFocusStatus.value = e.show
	}

	/* 时间格式化 */
	function formatDate(inputDateStr) {
		// 获取当前日期和时间
		const currentDate = new Date()
		const currentYear = currentDate.getFullYear()
		const currentMonth = currentDate.getMonth() + 1
		const currentDay = currentDate.getDate()

		// 将输入的日期时间字符串转换为日期对象
		const inputDate = new Date(inputDateStr)
		const inputYear = inputDate.getFullYear()
		const inputMonth = inputDate.getMonth() + 1
		const inputDay = inputDate.getDate()

		// 比较两个日期是否为同一天
		const isSameDay =
			currentYear === inputYear && currentMonth === inputMonth && currentDay === inputDay

		// 根据比较结果显示不同的格式
		if (isSameDay) {
			return inputDate.toTimeString().split(' ')[0].substring(0, 5)
		} else {
			return `${inputYear}年${inputMonth}月${inputDay}日`
		}
	}

	onLoad(async () => {
		await getListData()
		// state.publishList = publishList
	})
</script>

<style scoped lang="scss">
	/* 导航栏 */
	:deep(.wd-navbar) {
		width: 100%;
		// height: 84.62rpx;
		height: 470rpx;
		background-image: url('@/static/images/comment/header-bg.png');
		background-repeat: no-repeat;
		background-position: left top;
		background-size: 100% 100%;

		.wd-navbar__title {
			font-size: 30rpx;
			font-weight: normal;
			color: #fff;
		}

		.wd-navbar__arrow {
			color: #fff;
		}

		.wd-navbar__left {
			align-items: start;
		}

		/* 未滚动时 */
		.no-scroll {
			position: absolute;
			top: 180rpx;
			left: 60rpx;
			display: flex;
			gap: 24rpx;
			align-items: flex-end;
			font-size: 40rpx;
			font-weight: 500;
		}
	}

	:deep(.wd-navbar.is-border::after) {
		display: none;
	}

	/* 发布列表 */
	.publish-list {
		min-height: calc(100vh - 470rpx);
		background: #fff;

		&>view {
			display: flex;
			padding: 50rpx 30rpx;

			&>view:nth-child(1) {
				width: 120rpx;
				margin-right: 24rpx;
				font-size: 26rpx;
				color: #999999;
				text-align: right;
			}

			&>view:nth-child(2) {
				flex: 1;
				padding: 20rpx;
				font-size: 28rpx;
				color: #3d3d3d;
				background: #f7f7f7;
				border-radius: 12rpx;
			}

			.imgList {
				display: grid;
				gap: 12rpx;
				margin: 20rpx 0;
			}
		}
	}
</style>